<template>
  <div class="preview">
    <!-- <div class="right" :class="previewType"></div>
    <div class="left" :class="previewType"></div> -->
    <iframe v-if="isSHow" :src="previewUrl" width="100%" frameborder="0" id="if" />
    <!-- <div class="error" v-if="isError">传入文件格式不正确</div> -->
    <!-- <div class="loading">预览模块加载中...</div> -->
  </div>
</template>
<script>
export default {
  props: {
    fileUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      previewUrl: ``, // 预览地址
      isError: false, // 异常信息
      isSHow: true, // 刷新预览页面
    };
  },
  watch: {
    fileUrl: {
      handler(newValue) {
        if (!newValue) return;

        let exit = newValue.split("?");
        exit = exit[0].split(".");
        exit = exit.pop();
        const arr = ["pptx", "ppt", "docx", "doc", "xlsx", "xls", "pdf"];

        if (!arr.some((i) => i == exit)) return (this.isError = true);
        this.isError = false;
        this.isSHow = false;
        if (exit == "pdf") {
          this.previewUrl = this.pasePdfUrl(newValue);
        } else {
          this.previewUrl = this.paseOfficeUrl(newValue);
        }
        this.isSHow = true;
      },
      immediate: true,
    },
  },
  methods: {
    pasePdfUrl(url) {
      // 第一种预览PDF
      return url;

      // 第二种预览PDF
      // url = encodeURIComponent(url);
      // return `https://view.officeapps.live.com/op/embed.aspx?src=${url}`;
    },
    paseOfficeUrl(url) {
      url = encodeURIComponent(url);
      // 第一种预览视图
      return `https://view.officeapps.live.com/op/embed.aspx?src=${url}`

      // 第二种预览视图
      // let ops = {
      //   expire: 30, // 预览链接有效期，单位分钟，默认永久有效
      //   pdf: false, // word文档尝试以pdf方式显示，默认false
      //   img: false, // 尝试以图片方式显示，默认false
      //   watermark: "", // 水印文本，显示文本水印；"img:"+图片url表示图片水印
      //   saveable: false, // 是否允许保存源文件，默认false
      //   printable: false, // 是否允许打印，默认true
      //   copyable: false, // 是否允许选择复制内容，默认true
      //   toolbar: true, // 是否显示工具条，默认true
      //   title: "", // 自定义标题
      //   limit: "", // 限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效
      //   filename: "", // 文件名，辅助识别文档格式
      //   fontsize: 14, // 字体大小(单位px)，默认14，范围:6~58
      //   mtime: "",
      // };
      // let xurl = `https://view.xdocin.com/view?src=${url}`;
      // //传入预览参数
      // for (var a in ops) {
      //   xurl += "&" + a + "=" + encodeURIComponent(ops[a]);
      // }
      // return xurl;
    },
  },
  // computed: {
    // previewType() {
    //   let exit = this.fileUrl.split("?");
    //   exit = exit[0].split(".");
    //   if (!exit.length) return console.log("传入文件格式不正确");
    //   exit = exit.pop();

    //   switch (exit) {
    //     case "pptx":
    //     case "ppt":
    //       return "ppt";
    //     case "docx":
    //     case "doc":
    //       return "word";
    //     case "xlsx":
    //     case "xls":
    //       return "excel";
    //     case "pdf":
    //       return "";
    //     default:
    //       console.log("传入文件格式不正确");
    //   }
    // },
  // },
};
</script>
<style lang="scss" scoped>
.preview {
  background-color: #FAFAFA;
  z-index: 100;
  // .right,
  // .left {
  //   position: absolute;
  //   z-index: 99999;
  // }
  // .ppt {
  //   height: 20px;
  //   width: 80px;
    // background-color: #FAFAFA;
    // &.right {
    //   bottom: 2px;
    //   right: 4px;
    // }
    // &.left {
    //   left: 4px;
    //   bottom: 2px;
    //   width: 50px;
    // }
  // }
  // .word {
  //   position: absolute;
  //   width: 80px;
  //   height: 17px;
  //   background-color: #ffffff;
    // &.right {
    //   bottom: 2px;
    //   right: 2px;
    // }
    // &.left {
    //   left: 2px;
    //   bottom: 2px;
    //   width: 40px;
    // }
  // }
  // .excel {
  //   position: absolute;
  //   width: 90px;
  //   height: 23px;
  //   background-image: linear-gradient(#FAFAFA, #FAFAFA);
    // &.right {
    //   bottom: 2px;
    //   right: 2px;
    // }
    // &.left {
    //   left: 2px;
    //   bottom: 2px;
    // }
  // // }
  // .error {
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  //   color: #ccc;
  // }
  // .loading {
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  //   color: #ccc;
  // }
  #if {
    height: calc(100% - 2.5rem);
    margin-top: 2.5rem;
    position: relative;
    z-index: 101;
  }
}
</style>
